<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>window learnig</title>
</head>
<body>
<script>
    // 像素比
    console.log(window.devicePixelRatio);
    // 浏览器窗口大小
    console.log(window.innerWidth); // 浏览器窗口宽度,不包含滚动条
    console.log(window.innerHeight); // 浏览器窗口高度,不包含滚动条
    console.log(window.outerWidth); // 浏览器窗口宽度,包含滚动条
    console.log(window.outerHeight); // 浏览器窗口高度,包含滚动条
    // 调整窗口大小
    window.resizeBy(200, 100)  // 缩放到300，200参数：
//     widthDelta：窗口宽度的增量或减量，正数表示增加宽度，负数表示减少宽度。
// heightDelta：窗口高度的增量或减量，正数表示增加高度，负数表示减少高度。
    window.resizeTo(100, 100) //缩放到100，100
    // 浏览器窗口尺寸，通常无法满足显示整个页面，所以window对象有方法可以跳转到指定位置
    window.scrollBy(0, 100) //  向下滚动100px
    window.scrollTo(100, 100) // 跳转到100，100(左上角是基准)
    // 正常滚动
    window.scrollBy({
        left: 100,
        top: 100,
        behavior: 'auto'
    })
    // 平滑滚动
    window.scrollTo({
        left: 100,
        top: 100,
        behavior: 'smooth'
    })
    //导航,接收四个参数
    // ，url: 网址
    // ,target：目标窗口（是已存在的窗口名）,如果不是已有窗口则打开一个新的标签页
    //<a target="tofram"></a>>
    // ,features： 特性字符串
    // ,replace： 是否替换当前窗口
    window.open('www.baidu.com')
    window.open('www.baidu.com', 'tofram', 'width=300,height=300') // 打开一个新窗口，宽300，高300

    // 安全限制，弹窗屏蔽程序
    let a = window.open('www.baidu.com')
    if (a === null)
        alert('弹窗被屏蔽')
    //浏览器或其他扩展程序在屏蔽弹窗时4，window.open会抛出错误，因此要准确检查弹窗是否背屏蔽了除了检测 window.open返回值是否为null
    // 还要检测错误
    try {
        let a = window.open('www.baidu.com')
        if (a === null)
            alert('弹窗被屏蔽')
    } catch (e) {
        alert('弹窗被屏蔽')
    }
 // 定时器， js在浏览器中的执行是单线程的，所以每次智能执行一段代码，为了调度不同的代码执行，
    // js维护了一个任务队列（消息队列 宏任务）
    // 宏任务： setTimeout setInterval setImmediate
    // 微任务： promise then catch finally

    // 延时器，第二个参数是要等待的毫秒数，调用setTimeout(fn, 1000) 的时候会返回一个id，id可以用clearTimeout(id)来取消
    let id =setTimeout(() => {
        console.log('延时器')
    }, 8000)
    console.log(id)
    clearTimeout(id)

    // 定时器
    // setInterval(() => {
    //     console.log('定时器')
    // }, 1000)
    // 系统对话框
    alert('hello')
    const b = confirm('hello');
    if (b) {
        console.log('点击了确定')
    } else {
        console.log('点击了取消')
    }
    const c = prompt('请输入你的名字', '张三'); // 输入框, 第二个参数是默认值

    // bom 最用用的对象 location ，即是window的对象也是 document的对象
    console.log(window.location)
    console.log(window.location.href) // 当前加载完整页面的URL
    console.log(window.location.protocol) // 页面请求协议通常是http或者https
    console.log(window.location.host) // 服务器及端口名
    console.log(window.location.hostname) // 服务器名
    console.log(window.location.port) // 端口名
    console.log(window.location.pathname) // 当前页面的路径和文件名
    console.log(window.location.search) // 查询字符串 以？ 开头的 ,会把这个查分成 数组， 键值对类型
    // ？?name=zhangsan&age=18
    //
    let a = window.location.href.split('?')[1].split('&') // 获取参数
    for (let i = 0; i < a.length; i++) {
        let b = a[i].split('=')
        console.log(b[0], b[1])
    }
    console.log(window.location.hash) // 锚点，以#开头
    console.log(window.location.username) // 用户名
    console.log(window.location.password) // 密码
    console.log(window.location.origin) //url的源地址，只读
   // Navigator对象， 最早是window对象，后来被分离出来， 获取浏览器相关的信息
    console.log(window.navigator)

</script>
</body>
</html>
